$(function () {
    //通用的id变量
    let id = 0;

    //打开添加窗口的事件
    $("#addOpen").click(function () {
        $("#addDiv").slideDown();
        $("#editDiv").slideUp();
    })

    //打开编辑窗口和回显的方法
    function editOpen() {
        $(".editBtn").click(function () {
            id = $(this).val();
            $.post("/PetServlet","opr=queryById&id="+id,function (data) {
                $("#editName").val(data.name);
                $("#editSpecies").val(data.species);
                $("#editAge").val(data.age);
            },"json")
            $("#editDiv").slideDown();
            $("#addDiv").slideUp();
        })
    }

    //关闭添加窗口的方法
    function addClose() {
        $("#addClose").click(function () {
            $("#addDiv").slideUp();
        })
    }
    addClose()
    //关闭编辑窗口的方法
    function editClose(){
        $("#editClose").click(function () {
            $("#editDiv").slideUp();
        })
    }
    editClose()

    /**
     * 添加的ajax方法
     */
    function addPet(){
        let name = $("#name").val();
        let species = $("#species").val();
        let age = $("#age").val();
        if (name == ""){
            alert("请输入宠物姓名")
        }else if (species == ""){
            alert("请输入宠物品种")
        }else if (age == ""){
            alert("请输入宠物年龄")
        }else {
            $.post("/PetServlet","opr=add&name="+name+"&species="+species+"&age="+age,function (data) {
                if (data>0){
                    alert("添加成功！")
                    $("#editName").val("");
                    $("#editSpecies").val("");
                    $("#editAge").val("");
                    $("#addDiv").slideUp();
                    queryPet()
                }else {
                    alert("添加失败！")
                }
            },"text")
        }
    }
    //添加窗口的提交事件
    $("#add").click(function () {
        addPet()
    })

    /**
     * 编辑的ajax方法
     */
    function editPet(){
        let name = $("#editName").val();
        let species = $("#editSpecies").val();
        let age = $("#editAge").val();
        if (name == ""){
            alert("请输入宠物姓名")
        }else if (species == ""){
            alert("请输入宠物品种")
        }else if (age == ""){
            alert("请输入宠物年龄")
        }else {
            $.post("/PetServlet","opr=update&name="+name+"&species="+species+"&age="+age+"&id="+id,function (data) {
                if (data>0){
                    alert("编辑成功！")
                    $("#editName").val("");
                    $("#editSpecies").val("");
                    $("#editAge").val("");
                    $("#editDiv").slideUp();
                    queryPet()
                }else {
                    alert("编辑失败！")
                }
            },"text")
        }
    }
    //编辑窗口的提交事件
    $("#edit").click(function () {
        editPet()
    })

    /**
     * 删除的ajax方法
     */
    function deletePet() {
        $(".delete").click(function () {
            if (confirm("请确定是否删除")){
                id = $(this).val()
                $.post("/PetServlet","opr=delete&id="+id,function (data) {
                    if (data>0){
                        alert("删除成功！")
                        queryPet()
                    }else {
                        alert("删除失败！")
                    }
                },"text")
            }
        })
    }

    /**
     * 查询的ajax方法
     */
    function queryPet() {
        let $petTable = $("#petTable");
        $petTable.empty();
        $petTable.append("<tr>\n" +
            "                <th>宠物编号</th>\n" +
            "                <th>宠物名字</th>\n" +
            "                <th>宠物品种</th>\n" +
            "                <th>宠物性别</th>\n" +
            "                <th>宠物生日</th>\n" +
            "                <th>宠物描述</th>\n" +
            "                <th>操作</th>\n" +
            "            </tr>")
        $.post("/PetServlet","opr=query",function (data) {
            $.each(data, function () {
                var $tr = $("<tr><td>"+this.petId+"</td><td>"+this.petName+"</td><td>"+this.petBreed+"</td><td>"+this.petSex+"</td><td>"+this.birthday+"</td><td>"+this.description+"</td><td><button class=\"editBtn\" value='"+this.id+"'> 编辑 </button>&nbsp&nbsp&nbsp<button class=\"delete\" value='"+this.id+"'> 删除 </button></td></tr>")
                $("#petTable").append($tr);
            })
            //隔行换色
            $("tr:even ").css({"background-color": "#eeeeee"});
            editOpen()
            deletePet()
        },"json")
    }
    queryPet()
})